<template>
  <view>
    <view class="search-box">
      <uni-search-bar class="search-bar" @input="input" :radius="100" cancelButton="none"></uni-search-bar>
      <view class="search-text" @click="search">查询</view>
    </view>

    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: windowHeight + 'px'}">
        <block v-for="(item, i) in foodList" :key="i">
          <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
            {{item.name}}
          </view>
        </block>
      </scroll-view>
      <!-- 右侧的内容视图区域 -->
      <view class="content-nutritive">
        <view class="nutritive-value">
          <view class="nutritive-value-name">食品名称: </view>
          <view>{{foodList[active].name}}</view>
        </view>
        <view class="nutritive-value">
          <view>食品类型: </view>
          <view>{{foodList[active].type}}</view>
        </view>
        <view class="nutritive-value">
          <view>热量: </view>
          <view>{{foodList[active].rl}}</view>
        </view>
        <view class="nutritive-value">
          <view>蛋白质: </view>
          <view>{{foodList[active].dbz}}</view>
        </view>
        <view class="nutritive-value">
          <view>维生素A: </view>
          <view>{{foodList[active].wssa}}</view>
        </view>
        <view class="nutritive-value">
          <view>维生素C: </view>
          <view>{{foodList[active].wsfc}}</view>
        </view>
        <view class="nutritive-value">
          <view>维生素E: </view>
          <view>{{foodList[active].wsse}}</view>
        </view>
        <view class="nutritive-value">
          <view>脂肪: </view>
          <view>{{foodList[active].zf}}</view>
        </view>
        <view class="nutritive-value">
          <view>碳水化合物: </view>
          <view>{{foodList[active].shhf}}</view>
        </view>
        <view class="nutritive-value">
          <view>钙: </view>
          <view>{{foodList[active].gai}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 系统窗口高度
        windowHeight: 0,
        // 食物数据的列表
        foodList: [{
          name: "绿鳍马面豚面包",
          type: "鱼虾蟹贝",
          rl: 83,
          dbz: 18.1,
          wssa: 15,
          wsfc: 0,
          wsse: 1.03,
          zf: 0.6,
          shhf: 1.2,
          gai: 54
        }, {
          name: "面包(均值)",
          type: "速食食品",
          rl: 312,
          dbz: 8.3,
          wssa: 0,
          wsfc: 0,
          wsse: 1.66,
          zf: 5.1,
          shhf: 58.1,
          gai: 49
        }, {
          name: "多维面包",
          type: "速食食品",
          rl: 316,
          dbz: 8.8,
          wssa: 0,
          wsfc: 0,
          wsse: 0.65,
          zf: 8.4,
          shhf: 51.3,
          gai: 49
        }, {
          name: "法式牛角面包",
          type: "速食食品",
          rl: 375,
          dbz: 8.4,
          wssa: 0,
          wsfc: 0,
          wsse: 3.75,
          zf: 14.3,
          shhf: 53.1,
          gai: 83
        }, {
          name: "法式配餐面包",
          type: "速食食品",
          rl: 282,
          dbz: 10,
          wssa: 0,
          wsfc: 0,
          wsse: 1.44,
          zf: 1.2,
          shhf: 57.7,
          gai: 127
        }, {
          name: "果料面包",
          type: "速食食品",
          rl: 278,
          dbz: 8.5,
          wssa: 0,
          wsfc: 0,
          wsse: 1.31,
          zf: 2.1,
          shhf: 56.2,
          gai: 124
        }, {
          name: "黄油面包",
          type: "速食食品",
          rl: 329,
          dbz: 7.9,
          wssa: 0,
          wsfc: 0,
          wsse: 5.45,
          zf: 8.7,
          shhf: 54.7,
          gai: 35
        }, {
          name: "乐斯美面包",
          type: "速食食品",
          rl: 333,
          dbz: 9.2,
          wssa: 0,
          wsfc: 0,
          wsse: 0.4,
          zf: 2.8,
          shhf: 67.8,
          gai: 22
        }, {
          name: "麦胚面包",
          type: "速食食品",
          rl: 246,
          dbz: 8.5,
          wssa: 0,
          wsfc: 0,
          wsse: 0.88,
          zf: 1,
          shhf: 50.8,
          gai: 75
        }, {
          name: "麦维面包",
          type: "速食食品",
          rl: 270,
          dbz: 8.3,
          wssa: 0,
          wsfc: 0,
          wsse: 0,
          zf: 4.7,
          shhf: 48.5,
          gai: 35
        }],
        // 当前选中项的索引，默认让第一项被选中
        active: 0,
        // 延时器的 timerId
        timer: null,
        // 搜索关键词
        searchKey: '',
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 windowHeight 窗口可用高度动态赋值
      this.windowHeight = sysInfo.windowHeight - 57
    },
    methods: {
      // input 输入事件的处理函数
      input(e) {
        // 清除 timer 对应的延时器
        clearTimeout(this.timer)
        // 重新启动一个延时器，并把 timerId 赋值给 this.timer
        this.timer = setTimeout(() => {
          // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
          this.searchKey = e
        }, 500)
      },
      // 点击查询按钮查询事件
      search() {
        var that = this;
        uni.request({
          url: 'https://apis.tianapi.com/nutrient/index',
          data: {
            key: 'fb104873e91953ec78d85966ead500bb',
            word: this.searchKey,
            mode: 0
          },
          success(res) {
            console.log(res)
            if (res.errMsg !== 'request:ok') return uni.$showMsg()
            if (res.data.msg === "数据返回为空") {
              return uni.$showMsg('查询不到相关内容！')
            }
            that.foodList = res.data.result.list
          },
          fail(res) {
            return uni.$showMsg('维护中！')
          }
        });
      },
      // 食物列表点击事件
      activeChanged(i) {
        this.active = i
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: white;
  }

  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .search-box {
    display: flex;
    align-items: center;
    // 设置吸顶效果
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fba007;
    margin-bottom: 1px;

    .search-bar {
      width: 90%;
    }

    .search-text {
      width: 10%;
      color: white;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .scroll-view-container {
    display: flex;
    z-index: -1;

    .left-scroll-view {
      width: 110px;

      .left-scroll-view-item {
        height: 70px;
        line-height: 70px;
        background-color: whitesmoke;
        text-align: center;
        font-size: 13px;
        padding: 0 15rpx;
        /* 禁止文本换行 */
        white-space: nowrap;
        /* 文本溢出时水平滚动 */
        text-overflow: scroll;
        // /* 滚动条设置 */
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;

        // 激活项的样式
        &.active {
          color: #fba007;
          background-color: #ffffff;
          position: relative;

          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #fba007;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      .left-scroll-view-item::-webkit-scrollbar {
        display: none;
      }
    }

    .content-nutritive {
      flex: 1;
      height: 800rpx;
      margin: auto 35rpx;

      .nutritive-value {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10rpx 30rpx;
        margin-bottom: 20rpx;
        border-radius: 15rpx;
        background-color: #f6f5ec;
        letter-spacing: 1px;

        .nutritive-value-name {
          min-width: 150rpx;
        }
      }

      .nutritive-value>view:first-child {
        color: #fba007;
        font-weight: bold;
        font-size: 32rpx;
        margin-right: 20rpx;
      }

      .nutritive-value>view:last-child {
        color: #a1a3a6;
        font-size: 28rpx;
      }
    }
  }
</style>